<template>
    <div class="cmn-view-layout">
        <!-- 统计卡片 -->
        <div class="cmn-view-head">
            <div class="type-tag_box">
                <TypeTag :list="typeList" :activeIndex="activeTypeIndex" @handleChange="changeTypeTag" />
            </div>
            <div class="count-bar_box">
                <CountBar :name="currentTypeName" :info="countInfo" />
            </div>
        </div>
        <!-- 地图图层列表 -->
        <div class="cmn-view-layer">
            <MapLayer />
        </div>
        <div class="cmn-view-left">
            <!-- 航空 -->
            <DynamicCard :config="aviationData.leftConfig" v-if="activeTypeIndex == 0" />
            <!-- 火车 -->
            <DynamicCard :config="trainData.leftConfig" v-if="activeTypeIndex == 1" />
            <!-- 长途大巴 -->
            <DynamicCard :config="busData.leftConfig" v-if="activeTypeIndex == 2" />
            <!-- 高速 -->
            <DynamicCard :config="highSpeedData.leftConfig" v-if="activeTypeIndex == 3" />
            <!-- 公交 -->
            <DynamicCard :config="transitData.leftConfig" v-if="activeTypeIndex == 4" />
            <!-- 地铁 -->
            <DynamicCard :config="metroData.leftConfig" v-if="activeTypeIndex == 5" />
            <!-- 出租车 -->
            <DynamicCard :config="taxiData.leftConfig" v-if="activeTypeIndex == 6" />
        </div>
        <div class="cmn-view-right">
            <!-- 航空 -->
            <DynamicCard :config="aviationData.rightConfig" v-if="activeTypeIndex == 0" />
            <!-- 火车 -->
            <DynamicCard :config="trainData.rightConfig" v-if="activeTypeIndex == 1" />
            <!-- 长途大巴 -->
            <DynamicCard :config="busData.rightConfig" v-if="activeTypeIndex == 2" />
            <!-- 高速 -->
            <DynamicCard :config="highSpeedData.rightConfig" v-if="activeTypeIndex == 3" />
            <!-- 公交 -->
            <DynamicCard :config="transitData.rightConfig" v-if="activeTypeIndex == 4" />
            <!-- 地铁 -->
            <DynamicCard :config="metroData.rightConfig" v-if="activeTypeIndex == 5" />
            <!-- 出租车 -->
            <DynamicCard :config="taxiData.rightConfig" v-if="activeTypeIndex == 6" />
        </div>
    </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { aviationData } from "./data/aviatio-data"
import { trainData } from "./data/train-data"
import { busData } from "./data/bus-data"
import { highSpeedData } from "./data/high-speed-data"
import { transitData } from "./data/transit-data"
import { metroData } from "./data/metro-data"
import { taxiData } from "./data/taxi-data"
import TypeTag from "./cmps/type-tag/type-tag.vue"
import CountBar from './cmps/count-bar/count-bar.vue'

// 交通类型数据
const typeList = [
    { label: "航空" },
    { label: "火车" },
    { label: "长途大巴" },
    { label: "高速" },
    { label: "公交" },
    { label: "地铁" },
    { label: "出租车" }
]

// 交通类型对应统计卡片数据
const countInfo = {
    "机场数": 20, "到达航班数": 30, "到达出港人流量": 500
}

// 顶部交通类型被选中索引
const activeTypeIndex = ref(0)

// 统计当前类型名称
const currentTypeName = ref(typeList[activeTypeIndex.value].label)

// 切换顶部交通类型
const changeTypeTag = (item, index) => {
    activeTypeIndex.value = index
    currentTypeName.value = typeList[activeTypeIndex.value].label
}

</script>
<style scoped lang="scss">
.type-tag_box,
.count-bar_box {
    display: flex;
    justify-content: center;
}

.count-bar_box {
    margin-top: vh(10);
}
</style>